<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,maximum-scale=1.0" />
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
		<title>海底捞</title>
	</head>

	<body>
		<div id="menu">
			<!--<div class="conTitle">海底捞</div>-->
			<div class="menu_header">
				<img class="headerBg" src="images/bg2@1x.png" />
				<div class="menuLogo">
					<img class="logo" src="images/logo@1x.png" />
					<span class="logoName">海底捞火锅店</span>
				</div>
			</div>
			<div class="sale">
				<div class="saleList">
					<img class="saleIcon" src="images/icon_manjian@1x.png" />
					<p>满100减10、满200减20、满300减30、满400减40</p>
				</div>
				<div class="brief">
					<img class="saleIcon" src="images/icon_gonggao@1x.png" /> 新店开业，欢迎宝宝们前来关注哦！
				</div>
			</div>
			<div class="menuBar">
				<a href="javascript:void(0);" class="list">
					<img class="listIcon" src="images/icon_canju2@1x.png" />
					<span class="listName">预定点餐</span>
				</a>
				<a href="javascript:void(0);" class="list">
					<img class="listIcon" src="images/icon_youhuiquan@1x.png" />
					<span class="listName">领优惠券</span>
				</a>
				<a href="javascript:void(0);" class="list">
					<img class="listIcon" src="images/icon_fuwuyuan@1x.png" />
					<span class="listName">叫服务员</span>
				</a>
				<a href="javascript:void(0);" class="list">
					<img class="listIcon" src="images/icon_fapiao@1x.png" />
					<span class="listName">我要买单</span>
				</a>
			</div>
			<div class="menuLeft">
				<ul class="listCon">
					<!--<li>
					<a href="#content1" class="current">今日推荐</a>
				</li>
				<li>
					<a href="#content2">本店特色</a>
				</li>
				<li>
					<a href="#content3">热销推荐</a>
				</li>
				<li>
					<a href="#content4">折扣专区</a>
				</li>
				<li>
					<a href="#content5">优惠套餐</a>
				</li>
				<li>
					<a href="#content6">周周爆款</a>
				</li>
				<li>
					<a href="#content7">日日爆款</a>
				</li>-->
					<li class="on">
						今日推荐
					</li>
					<li>
						本店特色
					</li>
					<li>
						热销推荐
					</li>
					<li>
						折扣专区
					</li>
					<li>
						优惠套餐
					</li>
					<li>
						周周爆款
					</li>
					<li>
						日日爆款
					</li>
				</ul>
				<span class="listConPull">
				<img src="images/icon_quanbu@1x.png"/>
			</span>
			</div>
			<div class="menuCon">
				<div class="menuConList">
					<div class="listTitle">
						今日推荐
					</div>
					<!--<ul class="listCon">
						<li>
							<a href="details.html" class="listImg">
								<img src="images/photo1@1x.png" />
								<div class="listContent">
									<span class="listName">肉蟹煲</span>
									<span class="listPrice">￥<i class="price">138.00</i></span>
									<img class="listAdd" src="images/btn_add@1x.png" />
								</div>
								<span class="listNum">1</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);" class="listImg">
								<img src="images/photo2@1x.png" />
								<div class="listContent">
									<span class="listName">肉蟹煲</span>
									<span class="listPrice">￥<i class="price">138.00</i></span>
									<img class="listAdd" src="images/btn_add@1x.png" />
								</div>
								<span class="listNum">0</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);" class="listImg">
								<img src="images/photo1@1x.png" />
								<div class="listContent">
									<span class="listName">肉蟹煲</span>
									<span class="listPrice">￥<i class="price">138.00</i></span>
									<img class="listAdd" src="images/btn_add@1x.png" />
								</div>
								<span class="listNum">0</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);" class="listImg">
								<img src="images/photo2@1x.png" />

								<div class="listContent">
									<span class="listName">肉蟹煲</span>
									<span class="listPrice">￥<i class="price">138.00</i></span>
									<img class="listAdd" src="images/btn_add@1x.png" />
								</div>
								<span class="listNum">0</span>
							</a>
						</li>
					</ul>-->
				</div>
				<div class="menuConList">
					<div class="listTitle">
						本店特色
					</div>
					<!--<ul class="listCon">
						<li>
							<a href="details.html" class="listImg">
								<img src="images/photo1@1x.png" />
								<div class="listContent">
									<span class="listName">肉蟹煲</span>
									<span class="listPrice">￥<i class="price">138.00</i></span>
									<img class="listAdd" src="images/btn_add@1x.png" />
								</div>
								<span class="listNum">1</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);" class="listImg">
								<img src="images/photo2@1x.png" />
								<div class="listContent">
									<span class="listName">肉蟹煲</span>
									<span class="listPrice">￥<i class="price">138.00</i></span>
									<img class="listAdd" src="images/btn_add@1x.png" />
								</div>
								<span class="listNum">0</span>
							</a>
						</li>
					</ul>-->
				</div>
				<div class="menuConList">
					<div class="listTitle">
						热销推荐
					</div>
					<!--<ul class="listCon">
						<li>
							<a href="details.html" class="listImg">
								<img src="images/photo1@1x.png" />
								<div class="listContent">
									<span class="listName">肉蟹煲</span>
									<span class="listPrice">￥<i class="price">138.00</i></span>
									<img class="listAdd" src="images/btn_add@1x.png" />
								</div>
								<span class="listNum">1</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);" class="listImg">
								<img src="images/photo2@1x.png" />
								<div class="listContent">
									<span class="listName">肉蟹煲</span>
									<span class="listPrice">￥<i class="price">138.00</i></span>
									<img class="listAdd" src="images/btn_add@1x.png" />
								</div>
								<span class="listNum">0</span>
							</a>
						</li>
					</ul>-->
				</div>
				<div class="menuConList">
					<div class="listTitle">
						折扣专区
					</div>
					<!--<ul class="listCon">
						<li>
							<a href="details.html" class="listImg">
								<img src="images/photo1@1x.png" />
								<div class="listContent">
									<span class="listName">肉蟹煲</span>
									<span class="listPrice">￥<i class="price">138.00</i></span>
									<img class="listAdd" src="images/btn_add@1x.png" />
								</div>
								<span class="listNum">1</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);" class="listImg">
								<img src="images/photo2@1x.png" />
								<div class="listContent">
									<span class="listName">肉蟹煲</span>
									<span class="listPrice">￥<i class="price">138.00</i></span>
									<img class="listAdd" src="images/btn_add@1x.png" />
								</div>
								<span class="listNum">0</span>
							</a>
						</li>
					</ul>-->
				</div>
				<div class="menuConList">
					<div class="listTitle">
						优惠套餐
					</div>
					<!--<ul class="listCon">
						<li>
							<a href="details.html" class="listImg">
								<img src="images/photo1@1x.png" />
								<div class="listContent">
									<span class="listName">肉蟹煲</span>
									<span class="listPrice">￥<i class="price">138.00</i></span>
									<img class="listAdd" src="images/btn_add@1x.png" />
								</div>
								<span class="listNum">1</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);" class="listImg">
								<img src="images/photo2@1x.png" />
								<div class="listContent">
									<span class="listName">肉蟹煲</span>
									<span class="listPrice">￥<i class="price">138.00</i></span>
									<img class="listAdd" src="images/btn_add@1x.png" />
								</div>
								<span class="listNum">0</span>
							</a>
						</li>
					</ul>-->
				</div>
				<div class="menuConList">
					<div class="listTitle">
						周周爆款
					</div>
					<!--<ul class="listCon">
						<li>
							<a href="details.html" class="listImg">
								<img src="images/photo1@1x.png" />
								<div class="listContent">
									<span class="listName">肉蟹煲</span>
									<span class="listPrice">￥<i class="price">138.00</i></span>
									<img class="listAdd" src="images/btn_add@1x.png" />
								</div>
								<span class="listNum">1</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);" class="listImg">
								<img src="images/photo2@1x.png" />
								<div class="listContent">
									<span class="listName">肉蟹煲</span>
									<span class="listPrice">￥<i class="price">138.00</i></span>
									<img class="listAdd" src="images/btn_add@1x.png" />
								</div>
								<span class="listNum">0</span>
							</a>
						</li>
					</ul>-->
				</div>
				<div class="menuConList">
					<div class="listTitle">
						日日爆款
					</div>
					<!--<ul class="listCon">
						<li>
							<a href="details.html" class="listImg">
								<img src="images/photo1@1x.png" />
								<div class="listContent">
									<span class="listName">肉蟹煲</span>
									<span class="listPrice">￥<i class="price">138.00</i></span>
									<img class="listAdd" src="images/btn_add@1x.png" />
								</div>
								<span class="listNum">1</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);" class="listImg">
								<img src="images/photo2@1x.png" />
								<div class="listContent">
									<span class="listName">肉蟹煲</span>
									<span class="listPrice">￥<i class="price">138.00</i></span>
									<img class="listAdd" src="images/btn_add@1x.png" />
								</div>
								<span class="listNum">2</span>
							</a>
						</li>
					</ul>-->
				</div>
			</div>
		</div>
		<div id="footer">
			<a href="javascript:void(0);" class="carList">
				<img class="listIcon" src="images/icon_gouwuche@1x.png" />
				<span class="carNum">0</span>
			</a>
			<div class="ftrList">
				<a href="javascript:void(0);" class="homeList">
					<img class="listIcon" src="images/icon_zhuye_hover@1x.png" />
					<span class="listName">首页</span>
				</a>
				<a href="mine.html" class="myList">
					<img class="listIcon" src="images/icon_wode@1x.png" />
					<span class="listName">我的</span>
				</a>
			</div>

		</div>
		<script type="text/javascript">
			$(function(){
				carnum()
			})
			$(document).ready(function() {
				//获取三个div
				var $divs = $(".menuCon .menuConList");
				$divs.each(function() {
					var listCon = $(this).find('.listCon li')
					listCon.each(function() {
						if($(this).find('.listNum').html() <= 0) {
							$(this).find('.listNum').hide()
						} else {
							$(this).find('.listNum').show()
						}
					})
				});
				//获取所有选项卡
				var $dLis = $(".listCon li");

				//浏览器窗口可视区宽高
				var $wWidth, $wHeight;

				function changeWH() {
					//获取浏览器可视区宽高
					$wWidth = $(window).width();
					$wHeight = $(window).height();
					//      $divs.each(function() {
					//          $(this).width($wWidth);
					//          $(this).height($wHeight);
					//      });
				}

				//页面加载完成后调用一次
				changeWH();
				//当浏览器窗口大小发生变化时，触发的事件
				$(window).resize(changeWH);

				//初始化
				funScroll();

				//浏览器滚动条滚动触发的事件
				$(window).scroll(funScroll);

				//条滚动事件方法
				function funScroll() {
					//获取当前滚动条的高度
					var top = $(document).scrollTop();

					//遍历所有的div
					$divs.each(function(index) {
						var $divObj = $(this);
						var thisTop = $divObj.offset().top;
						if(top >= thisTop) {
							//获取当前高亮的选项
							var $activeObj = $dLis.find(".on");
							if($dLis[index] && $($dLis[index]) != $activeObj) {
								$($dLis[index]).addClass("on").siblings().removeClass("on");
							}
						}
					});
				}

				//选项卡点击事件
				$dLis.click(function() {
					//更改选中项和其他兄弟节点的样式
					$dLis.find('li').removeClass("on");
					$(this).addClass("on").siblings().removeClass("on");
					var index = $dLis.index(this);
					//平滑到对应的div位置
					$("html,body").animate({
						scrollTop: $($divs[index]).offset().top
					}, 500);

				})
			})
			
			//计算所有数量
			//购物车数量显示
		function carnum() {
	        var conut = $('.carNum').text();
//	        conut++
////    		$('.carNum').text(conut)
			if (parseInt(conut)<= 0) {
				$('.carNum').hide()
			} else{
				$('.carNum').show()
			}
      		var carnum=0;
      		$(".listNum").each(function (){
      			if ($(this).text()!== '' && parseInt($(this).text())>0) {
      				var num = $(this).closest('.listCon li').find(".listNum").text();
      				carnum+=parseInt(num)
      				$('.carNum').text(carnum)
      				if($('.carNum').text()=="" || parseInt($('carNum').text())==0 ){
		        		$('.carNum').hide()
		        	}else {
		        		$('.carNum').show()
		        	}
      			}
      		})
	    }
		
		//点击按钮弹出菜单
		$('.listConPull').on('click',function(){
			$('.listCon').animate({
				'left':'0'
			},200);
			$(this).hide()
		})
		//点击页面其他地方关闭菜单
		 document.addEventListener('click',function (e) {
            var parent=$(e.target).parents('.listCon,.menuLeft');

            if(parent.length===0){
                console.log('不在弹层与按钮区')
                //操作此区域

                $('.listCon').animate({
					'left':'-2.48rem'
				},200);
			$('.listConPull').show(100)

            }else{
                console.log('按钮与弹层区')
            }
        })
		</script>
	</body>

</html>